/**  水印添加方法  */
// https://segmentfault.com/q/1010000043804220
let setWatermark = (watermarks, container, fullscreen) => {
    let page = document.getElementById('dplayer');
    let id = '1.23452384164.123412415';
    if (container === undefined) {
        return;
    }
    if (document.getElementById(id) !== null) {
        page.removeChild(document.getElementById(id));
    }
    // 设置局部水印
    var containerWidth = fullscreen ? document.body.offsetWidth : container.offsetWidth; // 获取父容器宽
    var containerHeight = fullscreen ? document.body.offsetHeight : container.offsetHeight; // 获取父容器高
    container.style.position = 'relative'; // 设置布局为相对布局
    var top = Math.random() * (containerHeight - 100);
    var left = Math.random() * (containerWidth - 548);
    let can = document.createElement('canvas');
    // 设置canvas画布大小
    can.width = 294;
    // can.width = 334;
    can.height = 45 * watermarks.length;

    let cans = can.getContext('2d');
    cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度
    cans.font = '15px Vedana';
    // cans.font = '20px Vedana';
    // cans.fillStyle = 'red';
    cans.fillStyle = '#13CBD3';
    // cans.textAlign = 'center';
    cans.border = '1px solid #13CBD3';
    cans.textBaseline = 'Middle';
    watermarks.forEach((item, index) => {
        cans.fillText(item, can.width / 2, can.height + (index * 22)); // 水印在画布的位置x，y轴
    })

    let div = document.createElement('div');
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = top + 'px';
    div.style.left = left + 'px';
    div.style.opacity = '0.4';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = can.width+'px';
    // div.style.width = '394px';
    div.style.height = can.height+'px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    page.appendChild(div);
    // container.appendChild(div);
    return id;
};

export const setMeetingWaterMark = (meetingWaterElId) => {
    // debugger
    let page = document.getElementById('dplayer');
    let meetingWaterEl = document.getElementById(meetingWaterElId);
    let clonedElement = meetingWaterEl.cloneNode(true);
    if(page.contains(clonedElement)) {
        return;
    }
    page.appendChild(clonedElement);
    clonedElement.style.display = 'block';
}

export const removeMeetingWaterMark = (meetingWaterElId) => {
    let page = document.getElementById('dplayer');
    let meetingWaterEl = page.getElementById(meetingWaterElId);
    if(meetingWaterEl !== null) {
        page.removeChild(meetingWaterEl);
    }
}

// 添加水印方法
export const setWaterMark = (waterMarks, container, fullscreen) => {
    let id = setWatermark(waterMarks, container, fullscreen);
    if (document.getElementById(id) === null) {
        id = setWatermark(waterMarks, container, fullscreen);
    }
};

// 移除水印方法
export const removeWatermark = () => {
    let id = '1.23452384164.123412415';
    let page = document.getElementById('dplayer');

    if (document.getElementById(id) !== null) {
        page.removeChild(document.getElementById(id));
    }
};
